<template>
	<view class="zh-service-chain">
		<view class="banner">
			<image :src="IMG_URL + '/service/chain/banner.png'" class="banner"/>
		</view>
		<view class="box">
			<view class="title">
				<text>我们的优势</text>
			</view>
			<view class="content display-flex justify-between flex-wrap">
				<view class="item">
					<image :src="IMG_URL + '/service/chain/1.png'"/>
					<text class="des1">全流程管控</text>
					<text class="des2">合规合法</text>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/chain/2.png'"/>
					<text class="des1">供应链服务</text>
					<text class="des2">专业纺织产业</text>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/chain/3.png'"/>
					<text class="des1">全程数字化</text>
					<text class="des2">可视化监管</text>
				</view>
				<view class="item">
					<image :src="IMG_URL + '/service/chain/4.png'"/>
					<text class="des1">安全保障</text>
					<text class="des2">实力央企</text>
				</view>
			</view>
		</view>
		<view class="business-btn"  @click="openServiceLink">
			<button class="btn">业务洽谈</button>
		</view>
		<view class="explain">
			<view class="title">
				<image :src="IMG_URL + '/service/purchase/line-right.png'" class="line-left"/>
				<image :src="IMG_URL + '/service/purchase/line-right.png'" class="line-right"/>
				<text>供应链整合服务</text>
			</view>
			<view class="content">
				<text>平台以客户现货交易为基础，提供仓储、物流、求购、销售等供应链配套服务，解决客户痛点。同时针对市场走势，对接采供需求，把握商机，互惠共赢。</text>
			</view>
		</view>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService" @save="saveService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { tip } from '@/utils'
	import { onHide, onShareAppMessage } from '@dcloudio/uni-app'
	import serviceLink from '@/pages/components/service-link'
	
	import { IMG_URL } from '@/utils/constant'
	const showServiceLink = ref(false)
	
	onHide(() => {
		showServiceLink.value = false
	})
	
	onShareAppMessage(() => {})
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('拨打电话成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const saveService = () => {
		tip.showToast('已保存，请用微信扫码加好友')
	}
</script>

<style lang="scss" scoped>
	.zh-service-chain {
		.banner {
			width:750rpx;
			height:410rpx;
		}
		.box {
			margin:-55rpx 31rpx 0;
			padding:64rpx 40rpx 60rpx;
			background:#fff;
			box-shadow: 0px 0px 20px 0px rgba(218,218,224,0.3);
			border-radius: 24px;
			position: relative;
			.title {
				text-align: center;
				font-size: 36rpx;
				color:333;
				font-weight: bold;
			}
			.content {
				margin-top:26rpx;
				.item {
					width: 200rpx;
					margin-top:38rpx;
					text-align: center;
					image {
						width:90rpx;
						height: 90rpx;
					}
					.des1 {
						font-size:32rpx;
						color:#333;
						display: block;
						margin-top: 24rpx;
					}
					.des2 {
						font-size: 24rpx;
						color:#868894;
						display: block;
						margin-top: 20rpx;
					}
				}
			}
		}
		.business-btn {
			margin:42rpx auto 0 ;
			.btn {
				width: 670rpx;
				height: 112rpx;
				line-height: 112rpx;
				background: linear-gradient(268deg, #37B6FF, #1F7EFF );
				border-radius: 16rpx;
				color:#fff;
				text-align:center;
				font-size:36rpx;
			}
		}
		.explain {
			padding-bottom:80rpx;
			margin-top:70rpx;
			.title {
				font-size: 26rpx;
				color:#767B81;
				text-align: center;
				position:relative;
				.line-left {
					position:absolute;
					width: 211rpx;
					height: 9rpx;
					left:60rpx;
					top:15rpx;
					transform: rotate(180deg);
				}
				.line-right {
					position:absolute;
					width: 211rpx;
					height: 9rpx;
					right:60rpx;
					top:15rpx;
				}
			}
			.content {
				font-size:24rpx;
				color:#767B81;
				margin:44rpx 42rpx 0;
			}
		}
	}
</style>
